<template>
	<div class="headerWrap">
		<div class="header">
			<img class="left" src="@/assets/hmm/4.png" />
			<div class="right">
				<el-select v-if="state.institution != 'userInfo'" v-model="state.value" placeholder="请输入" filterable @change="institution">
					<el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<div class="info">
					<el-dropdown :hide-on-click="false">
						<span class="el-dropdown-link">
							<el-avatar v-if="state.userInfo.avatar" :size="30" :src="state.userInfo.avatar"></el-avatar>
							<el-avatar v-else :size="30">{{ userFirstName }}</el-avatar>

							<!-- <img :src="state.userInfo.avatar ? state.userInfo.avatar : smile" /> -->
							<i style="margin-left: 5px">{{ state.userInfo.username }}</i>
							<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="uderInfo(1)">个人信息</el-dropdown-item>
								<el-dropdown-item @click="uderInfo(2)">修改密码</el-dropdown-item>
								<el-dropdown-item @click="layOutFun">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { orgList, logout } from '@/api/auth-hm'
import smile from '../../../assets/hmm/5.png'
import store from '@/store'
const route = useRoute()
const router = useRouter()
const props = defineProps(['childProp'])
const state = reactive({
	value: '',
	options: [],
	institution: '',
	userInfo: {
		avatar: ''
	},
	isTrue: null
})
const userFirstName = ref('')
watch(
	props,
	newValue => {
		state.institution = newValue.childProp.route
		state.userInfo = newValue.childProp.userInfo
		state.isTrue = newValue.childProp.isTrue

		if (state.userInfo.realName) {
			userFirstName.value = state.userInfo.realName[0].toUpperCase()
		}
		if (newValue.childProp.isTrue == true) {
			sessionStorage.setItem('userInfoState', 'true')
		} else {
			sessionStorage.setItem('userInfoState', 'false')
		}
	},
	{ immediate: true, deep: true }
)
onMounted(() => {
	orgListFun()
})
const layOutFun = () => {
	ElMessageBox.confirm('请确认是否要退出统一登录平台？', {
		cancelButtonText: '取消',
		confirmButtonText: '退出登录',
		type: 'warning'
	}).then(() => {
		let loginForm = {}
		logout(loginForm).then((res: any) => {
			if (res.code == 0) {
				sessionStorage.removeItem('loginState')
				sessionStorage.removeItem('token')
				sessionStorage.removeItem('userInfoState')
				sessionStorage.removeItem('userInfo')
				sessionStorage.removeItem('platformId')
				ElMessage({
					message: '退出成功',
					type: 'success'
				})
				router.push('/login')
			} else {
				ElMessage.error(res.msg)
			}
		})
	})
}
const uderInfo = num => {
	let user = sessionStorage.getItem('loginState')
	if (user == 'true') {
		console.log(1111)
	} else {
		sessionStorage.setItem('userInfoState', 'true')
		if (num == 1) {
			router.push({ path: '/userInfoTwo', query: { active: 0 } })
		} else {
			router.push({ path: '/userInfoTwo', query: { active: 1 } })
		}
	}
}

const orgListFun = () => {
	let loginForm = {}
	state.options = []
	let userInfoStates = sessionStorage.getItem('userInfoState')
	if (userInfoStates && userInfoStates == 'true') {
		return false
	}
	orgList(loginForm).then((res: any) => {
		if (res.code == 0) {
			let dataList = res.data
			for (let i = 0; i < dataList.length; i++) {
				let obj = {
					value: '',
					label: ''
				}
				obj.value = dataList[i].id
				obj.label = dataList[i].name
				state.options.push(obj)
			}
			let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
			if (userInfo && userInfo.orgId) {
				state.value = userInfo.orgId
			} else {
				state.value = state.options[0].value
			}
			emit('sendState', state.value)
		} else {
			ElMessage.error(res.msg)
		}
	})
}
let emit = defineEmits(['sendState']) // 获取emit定义的分发事件名称,使用kebab-case
const institution = () => {
	emit('sendState', state.value)
}
</script>

<style lang="scss" scoped>
.header {
	padding: 14px 16px;
	position: relative;
	background: #fff;
	.left {
		display: block;
		width: 116px;
		height: inherit;
		float: inherit;
	}
	.right {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 16px;
		float: inherit;
		width: inherit;
		height: inherit;
		::v-deep(.el-select) {
			display: inline-block;
			vertical-align: middle;
			margin-right: 24px;
			width: 214px;
			.el-input.is-focus {
				.el-input__wrapper {
					box-shadow: 0 0 0 1px #409eff inset !important;
				}
			}
		}
		.info {
			display: inline-block;
			vertical-align: middle;
			img {
				display: inline-block;
				vertical-align: middle;
				width: 25px;
				height: 25px;
				margin-right: 16px;
			}
			span {
				// display: inline-block;
				vertical-align: middle;
			}
			.example-showcase .el-dropdown + .el-dropdown {
				margin-left: 15px;
			}
			.example-showcase .el-dropdown-link {
				cursor: pointer;
				color: var(--el-color-primary);
				display: flex;
				align-items: center;
			}
			::v-deep(.el-dropdown) {
				.el-dropdown-link {
					i {
						font-style: normal;
						display: inline-block;
						vertical-align: middle;
					}
					.el-avatar {
						background: #667afa;
					}
				}
			}
		}
	}
}
</style>
